<template>
    <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close">
        <!-- <el-form class="tl-form" ref="dealform" :model="model" :rules="rules" label-width="150px"> -->
        <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-alert title="若只更新任务进度相关信息，请点击保存按钮即可；若任务已完成，请点击任务完成按钮，任务完成后次日不在生成该任务相关的工作日志。" show-icon type="warning" :closable="false">
                    </el-alert>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="自评进度" prop="progress" :rules="rules.validateRequire">
                        <el-input-number v-model="model.progress" controls-position="right" :step="10" :min="0" :max="100" style="width:95%"></el-input-number>
                        <span>%</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="margin-left:60px">
                    <el-button type="success" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave">
                        <svg-icon icon-class="save" />保存</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="进度说明" prop="progressexplain" :rules="rules.validateRequire">
                        <el-input v-model="model.progressexplain" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- </el-form> -->
            <el-row>
                <el-col :span="24">
                    <el-divider content-position="center"><span>【以下信息为只读信息】</span></el-divider>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-divider content-position="left"><span>1、【任务】相关信息</span></el-divider>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="里程碑" prop="milepostid" :required="true">
                        <el-input v-model="model.dispmilepostid" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="任务名称" prop="name">
                        <el-input v-model="model.name" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务类型" prop="tasktype">
                        <el-select v-model="model.tasktype" filterable clearable disabled>
                            <el-option v-for="item in codeModel.tasktypeList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="优先级" prop="priority">
                        <el-select v-model="model.priority" filterable clearable disabled>
                            <el-option v-for="item in codeModel.priorityList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务类别" prop="taskcategory" :rules="rules.validateRequire">
                        <el-select v-model="model.taskcategory" filterable clearable disabled @change="currentTaskState">
                            <el-option v-for="item in codeModel.taskcategoryList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="任务状态" prop="taskstate">
                        <el-select v-model="model.taskstate" filterable clearable disabled>
                            <el-option v-for="item in codeModel.taskstateList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="负责人" prop="leadername">
                        <el-input v-model="model.leadername" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人工号" prop="leadercode">
                        <el-input v-model="model.leadercode" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="参与人" prop="participantnames">
                        <el-input v-model="model.participantnames" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="参与人工号" prop="participantcodes">
                        <el-input v-model="model.participantcodes" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="任务说明" prop="explain">
                        <el-input v-model="model.explain" type="textarea" :rows="2" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划开始日期" prop="starttime">
                        <el-date-picker v-model="model.starttime" type="date" placeholder="计划开始日期" value-format="yyyy-MM-dd" disabled></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计划结束日期" prop="endtime">
                        <el-date-picker v-model="model.endtime" type="date" placeholder="计划结束日期" value-format="yyyy-MM-dd" disabled></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="实际开始日期" prop="actualstarttime">
                        <el-date-picker v-model="model.actualstarttime" type="date" placeholder="实际开始日期" value-format="yyyy-MM-dd" disabled></el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="任务状态" prop="taskstate">
                        <el-select v-model="model.taskstate" filterable clearable disabled>
                            <el-option v-for="item in codeModel.taskstateList" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <!-- <el-col :span="12" v-show="model.taskstate == '4'">
                    <el-form-item label="实际完成时间" prop="actualendtime">
                        <el-date-picker v-model="model.actualendtime" type="date" placeholder="实际完成时间" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
                    </el-form-item>
                </el-col> -->
            </el-row>
            <!-- <el-row>
                <el-col :span="12" v-show="model.taskstate == '0'">
                    <el-form-item label="任务取消时间" prop="canceltime">
                        <el-date-picker v-model="model.canceltime" type="date" placeholder="任务取消时间" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row> -->
            <!-- <el-row>
                <el-col :span="12">
                    <el-form-item label="自评进度" prop="progress">
                        <el-input v-model="model.progress" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row> -->
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" prop="description">
                        <el-input v-model="model.description" type="textarea" :rows="2" :readonly="true" class="is-disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-collapse>
                <el-collapse-item title="【单据】相关信息">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="派工部门" prop="deptname">
                                <tl-ref-dept v-model="model.deptcode" :initDisplayData.sync="model.deptname" :disabled="true" dataType="code" nameType="fullname" :singleSelect="true" :externalQueryParam="{qry_enabled:1}"></tl-ref-dept>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="派工公司" prop="orgname">
                                <el-input v-model="model.orgname" :readonly="true" class="is-disabled"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="派工人" prop="username">
                                <tl-ref-user v-model="model.username" :initDisplayData.sync="model.username" :disabled="true" dataType="code" :singleSelect="true"></tl-ref-user>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="派工人工号" prop="usercode">
                                <el-input v-model="model.usercode" :readonly="true" class="is-disabled"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="单据日期" prop="docdate" :rules="rules.validateRequire">
                                <el-date-picker v-model="model.docdate" type="date" placeholder="单据日期" value-format="yyyy-MM-dd" disabled></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="提交时间" prop="submitdate">
                                <el-date-picker v-model="model.submitdate" type="datetime" placeholder="提交时间" disabled></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批流程" prop="flowid">
                                <el-input v-model="model.dispflowid" :readonly="true" class="is-disabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="state">
                                <el-input v-model="model.dispstate" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <tl-approval-history ref="history" sourceType="PmTask" :sourceId="model.id" />
        <div slot="footer" class="dialog-footer">
            <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit" v-if="uiOperateState<=2">取消</el-button>
            <!-- <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave">
                <svg-icon icon-class="save" />保存</el-button> -->
            <el-button type="primary" @click="doSubmitApproval" :loading="submitLoading" v-if="!disableEditSubmit" :disabled="disableApproval">
                <svg-icon icon-class="send" />提交审批</el-button>
            <tl-attachment sourceType="PmTask" :sourceId="model.id" :disabled="disableAttachment" :editable="stateEdit"></tl-attachment>
            <el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory">
                <svg-icon icon-class="list" />审批历史</el-button>
            <el-button type="primary" @click="doDelApproval" :loading="delApprovalLoading" v-if="!disableEditSubmit" :disabled="disableDelApproval">
                <svg-icon icon-class="undo" />取消审批</el-button>
        </div>
        <tlpm-milepost-ref ref="pmMilepostRef" @confirm="getpmMilepostRefData" :isSingleSelect="true"></tlpm-milepost-ref>
        <tlpm-team-ref ref="pmTeamRef" @confirm="getpmTeamRefData" :isSingleSelect="true"></tlpm-team-ref>
        <tlpm-team-ref ref="pmTeamParticipantRef" @confirm="getpmTeamParticipantRefData" :isSingleSelect="false"></tlpm-team-ref>
    </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
/** 子组件 */
import tlpmMilepostRef from '@/views/ProjectManage/pmMilepost/refList.vue'
import tlpmTeamRef from '@/views/ProjectManage/pmTeam/refList.vue'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
    mixins: [mixin_approval_edit],
    components: { tlpmMilepostRef, tlpmTeamRef },
    data() {
        return {
            moduleTitle: '任务管理',
            urlPrefix: '/pm/task/',
            url: {
                // 额外的url
                queryOrgByDeptId: '/pm/customer/queryOrgByDeptId'
            }
        }
    },
    methods: {
        assignDefaultValue() {
            if (this.isAdd) {
                if (this.codeModel.flowidList && this.codeModel.flowidList.length > 0) {
                    this.$set(this.model, 'flowid', parseInt(this.codeModel.flowidList[0].id))
                    this.$set(this.model, 'dispflowid', this.codeModel.flowidList[0].name)
                }
                this.$set(this.model, 'orgcode', this.org.code)
                this.$set(this.model, 'orgname', this.org.name)
                this.$set(this.model, 'deptcode', this.dept.code)
                this.$set(this.model, 'deptname', this.dept.fullname)
                this.$set(this.model, 'usercode', this.user.code)
                this.$set(this.model, 'username', this.user.name)
                // 开立1，已发布2，进行中3，完成4，取消0。
                // if (this.codeModel.taskstateList && this.codeModel.taskstateList.length > 0) {
                this.$set(this.model, 'taskstate', '1')
            }
        },
        loaded() {
            // 页面加载完毕执行
            if (!this.isAdd && this.model.docno) {
                this.title = this.title + `（单据编号：${this.model.docno}）`
            }
        },
        onSelectDept(selectedDepts) {
            const selectedDept = selectedDepts[0]
            const { id, code, fullname } = selectedDept
            this.$set(this.model, 'deptcode', code)
            this.$set(this.model, 'deptname', fullname)
            const param = {
                deptId: id
            }
            getAction(this.url.queryOrgByDeptId, param).then(res => {
                if (res.success) {
                    const { code: orgcode, name: orgname } = res.result
                    this.$set(this.model, 'orgcode', orgcode)
                    this.$set(this.model, 'orgname', orgname)
                } else {
                    this.$tap.alert('已选部门关联公司信息错误，请联系系统管理员')
                }
            })
        },
        /** 打开里程碑参照 */
        openpmMilepostRefDialog() {
            this.$refs.pmMilepostRef.visible = true
        },
        /** 获取里程碑参数数据 */
        getpmMilepostRefData(selectionRow, selectKey, selectionValue) {
            this.$set(this.model, 'milepostid', selectionRow.id)
            this.$set(this.model, 'dispmilepostid', selectionRow.milepostname)
            this.$set(this.model, 'projectid', selectionRow.projectid)
        },
        /** 打开负责人姓名参照 */
        openpmTeamRefDialog() {
            this.$refs.pmTeamRef.visible = true
        },
        /** 获取负责人姓名参数数据 */
        getpmTeamRefData(selectionRow, selectKey, selectionValue) {
            debugger
            this.$set(this.model, 'leadername', selectionRow.username)
            this.$set(this.model, 'leadercode', selectionRow.usercode)
        },
        /** 打开参与人姓名参照 */
        openpmTeamParticipantRefDialog() {
            this.$refs.pmTeamParticipantRef.visible = true
        },
        /** 获取参与人姓名参数数据 */
        getpmTeamParticipantRefData(selectedRows, selectedKeys, selectedValues) {
            let participantnames = ''
            let participantcodes = ''
            for (let { username, usercode } of selectedRows) {
                participantnames = participantnames + username + ','
                participantcodes = participantcodes + usercode + ','
            }
            if (participantnames.length > 0) {
                participantnames = participantnames.substring(0, participantnames.length - 1)
                participantcodes = participantcodes.substring(0, participantcodes.length - 1)
            }
            this.$set(this.model, 'participantnames', participantnames)
            this.$set(this.model, 'participantcodes', participantcodes)
        },
        saveCourierInfo(resolve, reject) {
            const { id, progress, progressexplain } = this.model
            if (!progress) {
                this.$tap.alert('请填写自评进度')
                reject()
            }
            if (!progressexplain) {
                this.$tap.alert('请填写进度说明')
                reject()
            }
            const param = {
                id,
                progress,
                progressexplain
            }
            putAction(this.url.edit, param)
                .then(res => {
                    if (res.success) {
                        resolve()
                    } else {
                        this.$tap.alert(res.message, 'warning')
                        reject()
                    }
                })
                .catch(err => {
                    this.$tap.alert('保存自评进度失败，请联系系统管理员', 'warning')
                    reject()
                })
        }
    }
}
</script>

